<template>
  <!-- 产品说明-->
  <div>
    <ul class="flexWap padding15 borderB1">
    
      <li class="wid250px marginB10 marginR10">
        <el-input placeholder="请输入搜索的内容" @change="search" v-model="pages.keyWord" :clearable="true">
        </el-input>
      </li>
      <li class="marginB10 marginR10">
        
        <el-button type="primary" @click="search">查询</el-button>
      </li>
      <li class="marginB10 marginR10">
        
        <el-button type="primary" @click="add">新增</el-button>
      </li>
      <li class="marginB10 marginR10">
        <el-button type="danger">批量删除</el-button>
      </li>
      <li class="marginB10 marginR10">
        <el-button type="info">导入数据</el-button>
      </li>
    </ul>
      
    <div class="padding15">
        <p class="paddingB15">已选择 <span class="colorRed">{{multipleSelection.length}}</span> 条数据</p>
      <el-table
              :data="lists"
              height="580"
              stripe
              border
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="55"/>
              <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column align="center" prop="levelCode" label="产品缩略图" width="120">
          <template slot-scope="scope">
             <img src="" alt="">
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="organizationName" label="产品名称" min-width="160"/>
        <el-table-column sortable align="center" prop="title" label="产品货号" width="120" />
        <el-table-column  align="center" prop="qCategoryNames" label="可兑换值" width="120" />
        <el-table-column  align="center" prop="endTime" label="产品兑换库存" width="200" >
          <template slot-scope="scope">
            <el-input-number style="width: 160px;" v-model="scope.row.id" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
        <el-table-column label="操作" align="center" width="140" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini"  type="primary"@click="edit(scope.row)">编辑</el-button>
            <el-dropdown style="margin-left: 10px;" trigger="click"  @command="handleCommand($event,scope.row)">
              <span class="el-dropdown-link">
                ...<i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="color: #F56C6C !important;" command="del">
                  删除
                    <!-- <el-button size="mini"  type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" command="look">
                  查看
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" command="explain">
                    产品说明
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" command="specifications">
                  产品属性规格
              </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
         
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :pages="pages" :searchQuery="searchQuery"></Pagination>
    </div>
    <el-drawer
            append-to-body
            title="产品说明"
            :visible.sync="explainShow"
            size="80%"
            @close="close"
    >
      <AddEditExplanin :detailObj="detailObj" v-if="explainShow" @close="close" />
    </el-drawer>
    <el-drawer
        append-to-body
        title="产品属性规格"
        :visible.sync="spsecificationsShow"
        size="80%"
        @close="close"
    >
  <AddEditSpecifications :detailObj="detailObj" v-if="spsecificationsShow" @close="close" />
</el-drawer>
  </div>
</template>
<script>
  // import {questionnaireRecordReportList,questionnaireRecordDel} from '@/assets/api/api'
  import {Mixin} from '@/assets/mixins/mixin'
  import moment from 'moment'
  import AddEditExplanin from './addEditExplain'
  import AddEditSpecifications from './addEditSpecifications'
  export default {
    name:'ProductList',
    mixins: [Mixin],
    components:{
    AddEditExplanin,AddEditSpecifications
    },
    props:['dispatchId','contentId'],
    data(){
      return{
        addEditPath:'/product/addEditProduct',//新增编辑的路径
        pageLoading:false,
        multipleSelection:[],
          explainShow:false,//产品说明显示
          spsecificationsShow:false,//产品属性规格
        moths:[new Date().setMonth(new Date().getMonth() - 3),new Date(new Date().getTime()+24*60*60*1000)],
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 3);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        title:'新增',
        pages:{ //分页搜索
          keyWord:'',
          page:1,
          size:10,
        },
        total:0,// 总条数
        loading:false,//加载中...
        lists:[{id:1}],
        detailObj:{},//点击每行的详情数据
        
      }
    },
    created() {
       
    },
    methods:{
      handleCommand(command,v){
          console.log(v,'scope.row')
          if(command==='del'){//删除
              this.handleDelete(v);
          }else if(command==='look'){//查看
              this.handleLook(v)
          }else if(command==='explain'){//产品说明
            this.detailObj = v;
              this.explainShow = true;
          }else{//产品属性规格
                this.spsecificationsShow = true;
          }
      },
      close(){
         this.explainShow = false;
         this.spsecificationsShow = false;
      },
      handleSelectionChange(val) {//多选
        this.multipleSelection = val;
      },
     
  
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .el-input-group__append, ::v-deep.el-input-group__prepend{
    color: #fff;
  }

</style>
